<template>
  <el-transfer
    v-model="vm"
    :data="config.data"
    :titles="config.titles"
    :format="{ noChecked: '( ${total} )', hasChecked: '( ${total} )' }"
  ></el-transfer>
</template>

<script>
  export default {
    name: 'm-transfer',
    data () {
      return {
        vm: []
      }
    },
    props: {
      value: {
        type: Array,
        default: () => []
      },
      config: {
        type: Object,
        default: () => ({
          data: [],
          titles: ['默认1', '默认2']
        })
      }
    },
    created () {
      this.vm = this.value
    },
    watch: {
      vm: {
        handler: function (a) {
          this.validateValue()
        },
      }
    },
    methods: {
      validateValue () {
        this.$emit('input', this.vm)
        this.$emit('change', this.vm)
      },
    }
  }
</script>
<style scoped lang='scss'>
/deep/.el-transfer__buttons {
  padding: 17px;
  .el-button.el-button--primary.el-transfer__button {
    display: block;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    &.is-disabled {
      background-color: rgb(108, 107, 139) !important;
      color: fff !important;
    }
  }
}
/deep/.el-transfer-panel {
  width: 342px;
  height: 470px;
}
/deep/.el-transfer-panel__list {
  height: 430px;
}
</style>
